<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Redstone红石，前端UI框架</title>
    <meta content="" name="Description">
    <meta content="" name="Keywords">
    <meta charset="UTF-8">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--坑爹的将360默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<link href="../less/flexible-layout.less" rel="stylesheet/less" type="text/css">-->
    <link href="../dist/layout.css" rel="stylesheet" type="text/css">
    <style>
        .box{
            background-color: #cccdcc;
            padding-left: 10px;
        }
         .item1{
             background-color: #88a93c;
             width: 20px;
             height: 20px;
             color: #ffe5f5;
             padding: 5px;
             border: 1px solid white;
             border-radius: 5px;
         }
        .item2{
            background-color: #88a93c;
            width: 20px;
            height: 30px;
            color: #ffe5f5;
            padding: 5px;
            border: 1px solid white;
            border-radius: 5px;
        }
        .item3{
            background-color: #88a93c;
            width: 20px;
            height: 40px;
            color: #ffe5f5;
            padding: 5px;
            border: 1px solid white;
            border-radius: 5px;
        }
        .item4{
            background-color: #88a93c;
            width: 20px;
            height: 50px;
            color: #ffe5f5;
            padding: 5px;
            border: 2px solid white;
            border-radius: 5px;
        }
    </style>
</head>
<body>
     <h1>横向对齐 .box-row</h1>
     <div class="box-row box">
         <div class="item1">
             1
         </div>
         <div class="item2">
             2
         </div>
         <div class="item3">
             3
         </div>
         <div class="item4">
             4
         </div>
     </div>

     <h1>横向反转 .box-row-rev</h1>
     <div class="box-row-rev box">
         <div class="item1">
             1
         </div>
         <div class="item2">
             2
         </div>
         <div class="item3">
             3
         </div>
         <div class="item4">
             4
         </div>
     </div>

     <h1>竖向 .box-col</h1>
     <div class="box-col box">
         <div class="item1">
             1
         </div>
         <div class="item2">
             2
         </div>
         <div class="item3">
             3
         </div>
         <div class="item4">
             4
         </div>
     </div>

     <h1>竖向反转 .box-col-rev</h1>
     <div class="box-col-rev box">
         <div class="item1">
             1
         </div>
         <div class="item2">
             2
         </div>
         <div class="item3">
             3
         </div>
         <div class="item4">
             4
         </div>
     </div>

     <h1>行对齐 靠顶部对齐? .</h1>
     <div class="box row-top">
         <div class="item1">
             1
         </div>
         <div class="item2">
             2
         </div>
         <div class="item3">
             3
         </div>
         <div class="item4">
             4
         </div>
     </div>


     <h1>行对齐 靠顶部对齐? .</h1>
     <div class="box row-center">
         <div class="item1">
             1
         </div>
         <div class="item2">
             2
         </div>
         <div class="item3">
             3
         </div>
         <div class="item4">
             4
         </div>
     </div>
</body>
</html>